<!DOCTYPE html >
<html>
<head>
<div id='div1' v-bind:title="div_title">
{{hello_message}}
</div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el: "#div1",
data: {
hello_message: "Hello, there welcome to VueJS world",
div_title: "This is my intro div",
},
beforeCreate: function(){
alert('Before Create');
},
created: function(){
	console.log(`hello_message is of type ${typeof this.hello_message}`);
	console.log(this.hello_message)
alert('Created');
},
beforeMount: function(){
alert('Before Mount');
},
mounted: function(){
console.log(this.hello_message)
alert('Mounted');
},
beforeUpdate: function(){
alert('Before Update');
},
updated: function(){
	console.log(hello_message)
alert('Updated');
},
beforeDestroy: function(){
alert('Before Destroy');
},
destroyed: function(){
alert('Destroyed');
}
});
// To fire update
v1.$data.hello_message = "New message";
// This can be invoked to destroy the object, which will fire the destroy hook
//v1.$destroy();
</script>
</body>
</html>